<!-- 首页图片配置信息 -->
<template>
  <div class="main-wrapper">
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      row-key="id"
    >
      <el-table-column label="模块名称" header-align="center">
        <template slot-scope="{row}" align="left">
          <span v-if="!row.edit">{{ row.value }}</span>
          <el-input v-else v-model="row.value" style="width: 300px" />
        </template>
      </el-table-column>
      <el-table-column label="图片信息" align="center">
        <template slot-scope="{row}">
          <upload-image class="big-image" fit="fill" :init-image="mapImages[row.id]" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getConfigHomeImages, addProjectConfig, editProjectConfig, delProjectConfig, getProjectConfig } from '@/api/config'
import { parseTime } from '@/utils'
import UploadImage from '@/components/Upload/UploadFixImage.vue'

export default {
  name: 'ProjectConfig',
  components: {
    UploadImage
  },
  filters: {
    styleFilter(style) {
      const styleMap = { 1: 'success', 0: 'danger' }
      return styleMap[style]
    },
    timeFilter(time, format) {
      return parseTime(time, format)
    },
    statusFilter(value) {
      const statusMap = { 0: '无效', 1: '有效' }
      return statusMap[value]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        groupId: 1006
      },
      mapImages: {
        34011: 'pub-proj-b',
        34012: 'pub-proj-w',
        34021: 'contract-proj-b',
        34022: 'contract-proj-w',
        34031: 'case-b',
        34032: 'case-w',
        34041: 'info-b',
        34042: 'info-w',
        34051: 'yj-doc-b',
        34052: 'yj-doc-w'
      },
      statusOptions: [
        { key: 0, statusName: '无效' },
        { key: 1, statusName: '有效' }
      ],
      projectConfigData: {},
      dialogFormVisible: false,
      dialogDetailVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      rules: {}
    }
  },
  created() {
    this.fetchConfigHomeImages()
  },
  methods: {
    fetchConfigHomeImages() {
      this.listLoading = true
      console.log('================')
      getConfigHomeImages().then(response => {
        console.log('-----------', response)
        this.list = response.data
        this.list = response.data.map(v => {
          this.$set(v, 'edit', false)
          v.origValue = v.value
          return v
        })
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchProjectConfigList()
    },
    resetProjectConfigData() {
      this.projectConfigData = {}
    },
    handleDetail(row) {
      this.projectConfigData = Object.assign({}, row)
      this.dialogDetailVisible = true
    },
    handleCreate() {
      this.resetProjectConfigData()
      this.projectConfigData.groupId = 1002
      this.projectConfigData.parentId = 1002
      this.projectConfigData.nodeType = 1
      this.projectConfigData.status = 0
      this.$set(this.projectConfigData, 'parentValue', '根节点')
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleCreateChild(row) {
      this.resetProjectConfigData()
      getProjectConfig(row.id).then(res => {
        // this.projectConfigData.parentValue = res.data.value
        this.$set(this.projectConfigData, 'parentValue', res.data && res.data.value)
        this.projectConfigData.groupId = res.data.groupId
        this.projectConfigData.parentId = row.id
        this.projectConfigData.nodeType = 1
        this.projectConfigData.status = 0
      })
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createProjectConfig() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addProjectConfig(this.projectConfigData).then((response) => {
            this.fetchProjectConfigList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleCancel(row) {
      row.value = row.origValue
      row.edit = false
    },
    updateProjectConfig(row) {
      editProjectConfig(row).then(() => {
        for (const v of this.list) {
          if (v.id === this.projectConfigData.id) {
            const index = this.list.indexOf(v)
            this.list.splice(index, 1, this.projectConfigData)
            break
          }
        }
        row.edit = false
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDelete(row, status) {
      row.status = status
      delProjectConfig(row.id).then(() => {
        this.fetchProjectConfigList()
      })
      this.$message({
        message: '操作成功',
        type: 'success'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main-wrapper {
  margin: 8px;
  .filter-container {
    padding: 10px 0;
    .filter-item {
      width: 200px;
      margin-right: 10px;
    }
  }
  .big-image .avatar {
    border: 1px solid #409EFF;
  }
}
</style>
